<template>
  <div class="merchantList">
    <div ref="list">
      <div class="weui-panel weui-panel_access" v-for="(item, index) in item" :key="index">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_appmsg">
            <div class="weui-media-box__hd">
                <img class="weui-media-box__thumb" :src="item.image_url">
            </div>
            <div class="weui-media-box__bd">
                <h4 class="weui-media-box__title">{{ item.merchant_full_name }}</h4>
                <p class="weui-media-box__desc">上级代理商：{{ item.agent_name }}</p>
            </div>
          </div>
          <div class="weui-cells">
            <div class="weui-cell weui-cell_access" @touchstart.stop.prevent="handleGoToBase(item.merchant_num)">
              <div class="weui-cell__hd"><svg-icon class="merchant" icon-class="wendang" width="18px" height="19px"></svg-icon></div>
              <div class="weui-cell__bd weui-cell_primary">
                  <p>基础资料审核状态<span class="fr" :class="item.base_chk_status === 10 ? 'tip' : item.base_chk_status === 200 ? 'succ' : item.base_chk_status === -10 ? 'err' : ''">{{ item.base_chk_status === 0 ? '未提交' : item.base_chk_status === 10 ? '待审核' : item.base_chk_status === 20 ? '已通过' : item.base_chk_status === -10 ? '审核失败' : '无' }}</span></p>
              </div>
              <span class="weui-cell__ft"></span>
            </div>
            <div class="weui-cell weui-cell_access" @click="handleGoToChannel(item.merchant_num)">
              <div class="weui-cell__hd"><svg-icon class="merchant" icon-class="icon-yxj-money-copy" width="20px" height="20px"></svg-icon></div>
              <div class="weui-cell__bd weui-cell_primary">
                  <p>支付通道审核状态
                    <span class="fr tip">查看</span>
                </p>
              </div>
              <span class="weui-cell__ft"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="loading" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
      <div class="weui-loadmore weui-loadmore_line" v-if="show">
        <span class="weui-loadmore__tips">哎呀，到底啦~</span>
      </div>
    </div>
  </div>
</template>

<script>
import { salesmanMerchant } from '@/api/salesman'
import infiniteScroll from 'vue-infinite-scroll'

export default {
  name: 'merchant',
  directives: {
    infiniteScroll
  },
  data () {
    return {
      item: [],
      busy: false,
      show: false,
      timer: null,
      timerInit: null,
      scrollTop: '',
      page: {
        current: 0,
        total_page: 0
      }
    }
  },
  methods: {
    handleDocument() {
      salesmanMerchant().then(res => {
        if (res.data.errorCode === 0) {
          this.item = res.data.result.data
          this.page.current = res.data.result.current_page
          this.page.total_page = res.data.result.last_page
        } else {
          this.$weui.alert(res.data.errorMsg)
        }
      })
    },
    loadMore() {
      this.busy = true
      salesmanMerchant(this.page.current + 1).then(res => {
        if (res.data.errorCode === 0) {
          res.data.result.data.forEach(element => {
            this.item.push(element)
          })
          this.page.current = res.data.result.current_page
          this.page.total_page = res.data.result.last_page
          if (this.page.current >= this.page.total_page) {
            this.show = true
            return false
          }
          this.busy = false
        } else {
          this.busy = false
          this.$weui.alert(res.data.errorMsg)
        }
      })
    },
    handleGoToChannel(merchant_num) {
      this.$router.push({ name: 'channel_list', query: { merchant_num } })
    },
    handleGoToBase(merchant_num) {
      this.$router.push({ name: 'baseList', query: { merchant_num }})
    }
  },
  created() {
    this.timerInit = setInterval(() => {
      this.handleDocument()
    }, 7000)
    window.addEventListener('scroll',() => {
      if (this.timerInit) {
        clearInterval(this.timerInit)
      }
      this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop === 0) {
        this.timer = setInterval(() => {
          this.handleDocument()
        }, 7000)
      } else if (this.scrollTop > 0) {
        clearInterval(this.timer)
      }
    })
  },
  beforeDestroy() {
    if (this.timerInit) {
      clearInterval(this.timerInit)
      this.timerInit = null
    }
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '@/styles/index.scss';
  .merchantList {
    background-color: #f5f5f4;
    img {
      width: px2rem(100px);
      height: px2rem(100px);
      border-radius: 50%;
    }
    .weui-media-box__title {
      font-size: px2rem(28px);
      color: #444;
    }
    .weui-media-box__desc {
      color: #757575;
      font-size: px2rem(24px);
    }
    svg {
      fill: #2E495C
    }
    .weui-cell_primary p {
      font-size: px2rem(28px);
      color: #6b6b6b;
      padding-left: 5px;
    }
    .weui-media-box_appmsg .weui-media-box__hd {
      text-align: left;
    }
    .weui-loadmore_line .weui-loadmore__tips {
      position: unset;
      background-color: transparent;
      padding: 0;
    }
    .weui-loadmore {
      margin: 0 auto;
    }
    .weui-cells {
      margin-top: 0;
    }
    .loading {
      height: px2rem(60px);
    }
  }
</style>
